<template>
	<div class="large-marker-video">
		<div class="large-marker-container">
			<video v-bind:id="`${option.id}-mark`" class="video-js vjs-big-play-centered">
				<source :src="option.url" type="video/mp4" />
			</video>
		</div>
		<div class="content-fotter">
			<div class="content-box" v-for="(item, index) in option.markers" :key="index">
				<el-tooltip class="item" effect="dark" :content="item.text" placement="bottom" v-if="item.text && item.text.length > 20">
					<span :class="isActivePointIdx === index ? 'text-active' : 'point-name'" @click="doContent(item.time)" :id="item.key">{{ item.text ? item.text : '' }}</span>
				</el-tooltip>
				<span v-else-if="item.text" @click="doContent(item.time)" :class="isActivePointIdx === index ? 'text-active' : 'point-text'" :id="item.key">{{ item.text ? item.text : '' }}</span>
			</div>
		</div>
		<div class="close-btn" @click="closeLargeVideo">X</div>
	</div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-markers';
import 'videojs-markers/dist/videojs.markers.css';
export default {
	name: 'LargrMarkerVideo',
	props: {
		option: {
			type: Object,
			required: true,
			default: () => {}
		}
	},
	data() {
		return {
			player: '',
			isActivePointIdx: -1
		};
	},
	watch: {},
	mounted() {
		this.$nextTick(() => {
			// 初始化videojs
			console.log('LargrMarkerOption:', this.option);
			this.player = videojs(`${this.option.id}-mark`, {
				controls: true, // 必填，显示各控制组件
				autoplay: true, // 是否自动播放
				preload: 'auto', // 预加载
				// poster: 'http://vjs.zencdn.net/v/oceans.png', // 视频封面
				width: '100%',
				height: '100%',
				loop: true, // 是否循环播放
				controlBar: {
					volumePanel: {
						inline: false // 将音量横向改为纵向
					},
					// 隐藏全屏按钮
					fullscreenToggle: false,
					//双击禁用全屏
					userActions: {
						doubleClick: false
					}
				},
				playbackRates: [0.5, 1, 1.5, 2, 3] // 定义播放速度列表
			});
			let timePoint = this.option.markers.filter(item => item.time);
			// console.log('timePoint:', timePoint);
			this.player.markers({
				markerStyle: {
					// 标记样式
					width: '0.7em',
					height: '0.7em',
					bottom: '-0.15em',
					'border-radius': '50%',
					'background-color': timePoint.length > 0 ? 'orange' : '',
					position: 'absolute',
					transform: 'translate(0,45%)'
				},
				markerTip: {
					display: true, // 显示标记的tip
					text: function (marker) {
						return String('打点坐席 :' + marker.userName + '\n' + marker.text);
					}
				},
				markers: this.option.markers,
				onMarkerClick: marker => {
					// console.log('onMarkerClick:', this.option.markers);
					this.option.markers.map((item, index) => {
						if (item.text === marker.text) {
							this.isActivePointIdx = index;
						}
					});
				}
			});
			// console.log('markers:', this.player.markers);
			let ele = document.getElementById(`${this.option.id}-mark`);
			this.player.on(ele.childNodes[0], 'timeupdate', e => {
				// eslint-disable-next-line radix
				let currentTime = parseInt(ele.childNodes[0].currentTime);
				// console.log('LargeMarker视频播放进度： ', currentTime);
				this.option.markers.map((item, index) => {
					// console.log(ele.childNodes[0].currentTime, item);
					if (currentTime === item.time) {
						this.isActivePointIdx = index;
						let currentNode = document.getElementById(item.key);
						// console.log(currentNode, 'currentNode');
						if (currentNode) {
							currentNode.scrollIntoView(false);
						}
					}
				});
			});
		});
	},
	methods: {
		closeLargeVideo() {
			this.$emit('closeLargeVideo');
		},
		doContent(time) {
			console.log('doContent:', time);
			let ele = document.getElementById(`${this.option.id}-mark`);
			// console.log(ele.childNodes[0].currentTime, time);
			ele.childNodes[0].currentTime = time;
		}
	},
	beforeDestroy() {
		if (this.player) {
			this.player.dispose();
		}
	}
};
</script>
<style lang="less" scoped>
.large-marker-video {
	width: 100%;
	height: 100%;
	z-index: 1000;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0);

	.large-marker-container {
		width: 100%;
		.video-js {
			width: 100%;
			height: calc(100vh - 106px) !important;
		}
	}
	.content-fotter {
		display: flex;
		flex-wrap: wrap;
		padding-top: 20px;
		height: 76px;
		overflow-x: hidden;
		background-color: #010001;
		.content-box {
			padding: 5px 5px;
			.point-name {
				padding: 0 4px;
				display: inline-block;
				text-align: center;
				height: 28px;
				line-height: 28px;
				background-color: #e4e4e4;
				border-radius: 4px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: 269px;
				color: #606266 !important;
				cursor: pointer;
			}
			.point-text {
				padding: 0 4px;
				display: inline-block;
				text-align: center;
				height: 28px;
				line-height: 28px;
				background: #e4e4e4;
				border-radius: 4px;
				color: #606266;
				cursor: pointer;
			}
			.text-active {
				padding: 0 4px;
				display: inline-block;
				text-align: center;
				height: 28px;
				line-height: 28px;
				background: #434a72;
				border-radius: 4px;
				color: #ffffff;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: 269px;
			}
			/deep/ .el-tooltip__popper.is-dark {
				background-color: #303133 !important;
			}
			/deep/ .popper__arrow {
				border-color: none !important;
			}
		}
	}
	.close-btn {
		position: absolute;
		top: 10px;
		right: 15px;
		z-index: 1000;
		color: #fff;
		font-size: 24px;
		z-index: 1000;
		cursor: pointer;
	}
}
</style>
<style>
/*使播放按钮变圆形*/
.video-js .vjs-big-play-button {
	font-size: 2.5em;
	line-height: 2.3em;
	height: 2.5em;
	width: 2.5em;
	-webkit-border-radius: 2.5em;
	-moz-border-radius: 2.5em;
	border-radius: 2.5em;
	background-color: #73859f;
	background-color: rgba(115, 133, 159, 0.5);
	border-width: 0.15em;
	margin-top: -1.25em;
	margin-left: -1.75em;
}
/*暂停时也显示播放按钮*/
.vjs-paused.vjs-has-started .vjs-big-play-button {
	display: block;
}
/*将时长倒计时变当前时间和总时长（这两行不能换位置）*/
.video-js .vjs-time-control {
	display: block;
	min-width: 1.2em;
	text-align: center;
	padding: 0;
}
.video-js .vjs-remaining-time {
	display: none;
}
/*hover进度条无放大效果*/
.video-js .vjs-progress-control:hover .vjs-progress-holder {
	font-size: 10px;
}
/*标记放大效果*/
.video-js .vjs-marker:hover {
	font-size: 1.6em;
}
.video-js .vjs-tip-inner {
	/* text-align: left; */
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	background-color: rgba(43, 48, 79, 0.9) !important;
	color: #fff !important;
	width: 400px !important;
}
.video-js .vjs-tip {
	left: 0;
	margin: 0;
}
.content-box .popper__arrow {
	border-color: none !important;
}
</style>
